<template>
  <div class="system-alert">
    <div class="alert-summary">
      <div class="alert-card critical">
        <div class="alert-count">{{ criticalAlerts }}</div>
        <div class="alert-label">严重警告</div>
      </div>
      <div class="alert-card warning">
        <div class="alert-count">{{ warningAlerts }}</div>
        <div class="alert-label">一般警告</div>
      </div>
      <div class="alert-card info">
        <div class="alert-count">{{ infoAlerts }}</div>
        <div class="alert-label">提示信息</div>
      </div>
    </div>

    <h4 class="section-title">系统警告列表</h4>
    <table class="data-table">
      <thead>
        <tr>
          <th width="60">级别</th>
          <th width="120">类型</th>
          <th width="200">描述</th>
          <th width="100">发生时间</th>
          <th width="80">状态</th>
          <th width="100">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="alert in alerts" :key="alert.id">
          <td>
            <span class="alert-badge" :class="alert.level">
              {{ alert.levelText }}
            </span>
          </td>
          <td>{{ alert.type }}</td>
          <td>{{ alert.description }}</td>
          <td>{{ alert.time }}</td>
          <td>{{ alert.status }}</td>
          <td>
            <button class="action-btn" @click="handleAlert(alert.id)">处理</button>
            <button class="action-btn" @click="viewAlert(alert.id)">详情</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface SystemAlert {
  id: string
  level: 'critical' | 'warning' | 'info'
  levelText: string
  type: string
  description: string
  time: string
  status: string
}

const criticalAlerts = ref(3)
const warningAlerts = ref(8)
const infoAlerts = ref(5)

const alerts = ref<SystemAlert[]>([
  {
    id: 'A001',
    level: 'critical',
    levelText: '严重',
    type: '库存警告',
    description: '阿莫西林胶囊库存严重不足，当前库存15盒，低于安全库存50盒',
    time: '2024-01-15 14:30',
    status: '未处理'
  },
  {
    id: 'A002',
    level: 'warning',
    levelText: '警告',
    type: '过期提醒',
    description: '感冒灵颗粒将于3天后过期，请及时处理',
    time: '2024-01-15 13:45',
    status: '已确认'
  },
  {
    id: 'A003',
    level: 'critical',
    levelText: '严重',
    type: '系统错误',
    description: '数据库连接间歇性中断，影响正常业务操作',
    time: '2024-01-15 12:20',
    status: '处理中'
  },
  {
    id: 'A004',
    level: 'info',
    levelText: '信息',
    type: '备份提醒',
    description: '系统自动备份完成，备份文件大小：245MB',
    time: '2024-01-15 02:00',
    status: '已完成'
  }
])

const handleAlert = (alertId: string) => {
  alert(`处理警告: ${alertId}`)
}

const viewAlert = (alertId: string) => {
  alert(`查看警告详情: ${alertId}`)
}
</script>

<style scoped>
.system-alert {
  font-size: 12px;
}

.alert-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.alert-card {
  background: white;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  border-left: 4px solid;
}

.alert-card.critical {
  border-left-color: #e74c3c;
}

.alert-card.warning {
  border-left-color: #f39c12;
}

.alert-card.info {
  border-left-color: #3498db;
}

.alert-count {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.alert-label {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.section-title {
  margin: 15px 0 8px 0;
  font-size: 13px;
  color: #333;
  font-weight: bold;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 12px;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

.alert-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  color: white;
}

.alert-badge.critical {
  background: #e74c3c;
}

.alert-badge.warning {
  background: #f39c12;
}

.alert-badge.info {
  background: #3498db;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #2980b9;
}
</style> 